<template>
	<view style="font-size: 30rpx;">
		<view class="order_itemBox" v-for="(item,index) in redeemList" :key="index" @click="orderDetails(item)">
			<view class="order_itemDetail">
				<view>
					<text style="font-size: 24rpx;">订单编号：</text>
					<text class="order_num">{{item.orderNo}}</text>
				</view>
				<view>
					<!-- <text>下单时间：</text> -->
					<text style="font-size: 24rpx;">{{item.redeemTime}}</text>
				</view>
			</view>
			<view class="goods-order-title">
				<view class="title-goods">商品详情</view>
				<view class="winStatus">
					{{ winStatusFormat(item) }}
				</view>
			</view>

			<view class="order_container_Details">
				<view class="container_Details">
					<view class="container_Pics">
						<image :src="item.product.imgurl" class="pics"></image>
					</view>
				</view>
				<view class="right_container">
					<view class="pics-box">
						<view class="title">{{item.name}}</view>
					</view>
					<view class="container_status">
						<view class="money_num">
							<!-- <view class="moneyStyle" v-if="item.payType===0">
								{{item.integral}}积分+{{item.money}}元
							</view> -->
							<view class="moneyStyle">
								{{item.product.integral}}
							</view>
							<view class="numStyle">{{item.exchangeCount}}</view>

						</view>
						<view class="toPay" v-if="item.deliveryStatus===2 && item.redeemStatus != 1">
							<view class="payOrder" @click.stop="toPayment(item)">去支付</view>
							<view class="cancleOrder" @click.stop="cancleOrder(item)">取消订单</view>
						</view>
						<view>
							<!-- redeemStatus 0:兑换成功 1:已取消 -->
						</view>
						<view class="toPay1" v-if='item.deliveryStatus===1'>
							<view class="cancleOrder" @click.stop="handleGetGoods(item)">确认收货</view>
						</view>

					</view>
				</view>
			</view>
			<view class="order_TOpay">
				<view>订单总消费：</view>
				<view class="result_pay">{{item.totalPrice}}</view>
			</view>
		</view>
		<view v-if='redeemList.length==0' class="winnerListNull"> 暂无数据！</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js';
	import {
		mapMutations
	} from "vuex"
	export default {
		name: 'myredeem',
		props: ['currentNum'],
		data() {
			return {
				redeemList: [],
				formData: {
					lucky: 0,
					size: 10,
					current: 1,
				},
				total: '',
				localNum: ''
			};
		},
		mounted() {
			this.getOrderList()

		},
		watch: {
			currentNum(newVal) { 
				this.getOrderList(); // 当currentNum变化时重新调用方法;
			}
		},
		methods: {
			// 传值，将total传给父组件
			exchangetotal() {
				this.$emit('exchangetotal', this.total);
			},
			// 获取订购单
			getOrderList(item) { 
				this.formData.current = this.currentNum;
				request.post("/redeemRecord/page", this.formData).then(res => {
					if (res.code === 0) { 
						if (item) {
							const start = (this.currentNum - 1) * 10;
							this.redeemList.splice(start, 10)
							this.redeemList.splice(start, 0, ...res.data); 
						} else {
							this.redeemList = this.redeemList.concat(res.data || []);
						}
						this.total = res.total
						this.exchangetotal()
					} else {
						uni.$showMsg(res.msg)
					}
				});
			},

			...mapMutations('m_order', ['saveAddressList', 'saveOrderInfo']),
			// 订单详情页
			orderDetails(item) {
				uni.navigateTo({
					url: '/subpkg/orderDetails/orderDetails?id=' + item.id
				})
			},
			toPayment(item) {
				uni.navigateTo({
					url: '/pages/payment/payment?orderInfo=' + JSON.stringify(item)
				})
			},

			// 取消订单
			cancleOrder(item) {
				uni.showModal({
					title: '取消订单',
					content: '确定取消订单吗？',
					success: function(res) {
						if (res.confirm) {
							// 走接口
							request.post("/redeemRecord/cancelOrder", {
								id: item.id
							}).then(res => {
								if (res.code === 0) { 
									uni.$showMsg(res.msg) 
									this.getOrderList('123')
								} else {
									uni.$showMsg(res.msg)
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}.bind(this) //可处理uni.shuowModal的异步（即拿不到data里面数据的解决办法）
				}); 
			},
			// 收货按钮
			handleGetGoods(item) {
				uni.showModal({
					title: '确认收货',
					content: '确定收货吗？',
					success: function(res) {
						if (res.confirm) {
							request.post("/redeemRecord/confirm", {
								id: item.id
							}).then(res => {
								if (res.code === 0) {
									uni.$showMsg(res.msg) 
									this.getOrderList('123') 
								} else {
									uni.$showMsg(res.msg)
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}

					}.bind(this) //可处理uni.shuowModal的异步（即拿不到data里面数据的解决办法）
				}); 
			},
			winStatusFormat(item) {
				if (item.redeemStatus == 1) {
					return "已取消"
				}
				switch (item.deliveryStatus) {
					case 0:
						return "待发货"
					case 1:
						return "待收货"
					case 2:
						return "待支付"
					case 3:
						return "已收货"
				}
			},
		}
	}
</script>

<style lang="scss">
	.winnerListNull {
		line-height: 150rpx;
		text-align: center;
	}

	.order_itemBox {
		margin-top: 10px;
		border: 1px solid #eeeeee;

		.order_itemDetail {
			display: flex;
			justify-content: space-between;
			padding: 10px;
			background-color: white;
			border-bottom: 1px solid #eeeeee;
			color: #868181;

			.order_num {
				font-size: 24rpx;
				color: deepskyblue;
			}
		}

		.goods-order-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: white;
			padding: 20rpx;
			border-bottom: 1px solid #eeeeee;

			.title-goods {
				font-size: 30rpx;
				font-weight: 400;
				color: #868181;
			}

			.winStatus {
				margin-right: 30rpx;
				color: #ff5555;
			}
		}

		.order_container_Details {
			padding: 10px;
			border-bottom: 1px solid #eeeeee;
			display: flex;
			background-color: white;

			.container_Details {
				display: flex;

				.container_Pics {
					display: flex;

					.pics {
						width: 120rpx;
						margin: 10rpx;
						height: 120rpx;
					}

				}
			}

			.right_container {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-top: 20rpx;

				.container_status {
					// border: 1px solid red;
					display: flex;
					flex: 1;
					justify-content: space-around;
					align-items: center;
					margin: 0rpx 10rpx 0rpx 20rpx;

					.money_num {
						display: flex;
						width: 50%;
						justify-content: space-between;
					}

					.moneyStyle {
						color: #ff5555;
						// width: 30%;
					}

					.numStyle {
						// width: 10%;
					}

					.toPay {
						// border-bottom: 1px solid red;
						// width: 100%;
						// padding: 10rpx 20rpx;
						display: flex;
						flex-direction: column;

						// justify-items: flex-end;
						// align-content: flex-end;
						// justify-content: flex-end;
						.payOrder {
							margin: 10rpx 10rpx;
							color: blue;
						}
					}

					.toPay1 {
						// width: 15%;
						// border-bottom: 1px solid red;
					}

					.cancleOrder {
						color: orange;
						// width: 40%;
					}
				}
			}
		}

		.order_TOpay {
			display: flex;
			justify-content: flex-end;
			padding: 10rpx 20rpx;
			line-height: 40rpx;
			background-color: #fff;

			.result_pay {
				color: red;
				font-size: 24rpx;
				font-weight: 600;
			}
		}
	}
</style>